<template>
  <div>
    <Swipe
      :autoplay="autoplay"
      :duration="duration"
      :initial-swipe="initialSwipe"
      :width="width"
      :height="height"
    >
      <SwipeItem class="swiper_item_container" v-for="(item,index) in swiperList" :key="index">
        <img :src="item.picUrl" :style="imageStyle"/>
      </SwipeItem>
    </Swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
export default {
  components: {
    //注册组件
    Swipe,
    SwipeItem,
  },
  props: {
    swiperList: {
      //接收图片数据
      type: Array, //接收的类型是一个数组
      required: true, //必传项
      // validator:function(value) {
      //   //验证函数
      //   return value.length!==0; //数组不能为空数据
      // },
    },
    autoplay: {
      //自动轮播间隔，单位为 ms
      type: Number || String, //接收的类型是数值类型或者字符串类型
      default: 3000, //默认自动轮播的间隔为3秒
    },
    duration: {
      //动画时长，单位为 ms
      type: Number || String, //接收的类型是数值类型或者字符串类型
      default: 500, //默认一张图片的动画时长为500毫秒
    },
    initialSwipe: {
      //初始位置索引值
      type: Number || String, //接收的类型是数值类型或者字符串类型
      default: 0, //默认初始位置索引值为0
    },
    width: {
      //轮播图容器的宽度
      type: String, //接收的类型是字符串类型
      default: "100%", //默认轮播图容器的宽度为100%
    },
    height:{ //轮播图容器的高度
        type: String, //接收的类型是字符串类型
        default: "10rem", //默认轮播图容器的高度为10rem
    }
  },
  computed:{
    imageStyle:function(){
      return{
        width:'100%',
        height:"10rem"
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.swiper_item_container{
  width: 100%;
  height: 100%;
}
</style>